<!DOCTYPE html>
<html>

<head>
  <title>Flex Grow and Shrink</title>
  <link href='resources/css/style.css' type='text/css' rel='stylesheet' />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>
</head>

<body>
  <h1>Step 1</h1>
  <div id='top'>
    <div class='top side'>
      <h2>1</h2>
    </div>
    <div class='top center'>
      <h2>2</h2>
    </div>
    <div class='top side'>
      <h2>3</h2>
    </div>
  </div>
  <h1>Step 2</h1>
  <div id='middle'>
    <div class='middle side'>
      <h2>1</h2>
    </div>
    <div class='middle center'>
      <h2>2</h2>
    </div>
    <div class='middle side'>
      <h2>3</h2>
    </div>
  </div>
  <h1>Step 3</h1>
  <div id='bottom'>
    <div class='bottom side'>
      <h2>1</h2>
    </div>
    <div class='bottom center'>
      <h2>2</h2>
    </div>
    <div class='bottom side'>
    <h2>3</h2>
    </div>
    </div>
    </body>

    </html>
